<template>
  <GeneralTableRender ref="generalTableRender" v-loading="tableLoading" table-mode="blend" style="padding:10px;background-color: #ffffff" @dataComplete="dataComplete" /></template>
<script>
export default {
  name: 'DemoRender',
  data() {
    return {
      tableLoading: true,
      tableJsonObj: {
        'data': {
          'tdData': [
            [{
              'val': '值(二级标题(单条))',
              'rowspan': 1,
              'colspan': 1,
              'key': 'key1',
              'cellType': 'text',
              'label': '二级标题(单条)',
              'otherVal': '',
              'otherSelect': false,
              'isRemove': false,
              'isEditCell': false,
              'size': '中',
              'isColorChange': false,
              'color': 'rgba(20, 0, 0, 1)',
              'isWeight': false,
              'isItalic': false,
              'underline': false,
              'align': '中',
              'valign': '中',
              'cellFill': 'rgba(254, 254, 254, 1)',
              'topBorderColor': '',
              'bottomBorderColor': '',
              'leftBorderColor': '',
              'rightBorderColor': '',
              'isShow': true,
              'selectFlag': 'td-0-0-1-1',
              'tag': 'td',
              'deleteBit': false,
              'usedFlag': 1,
              'dataSetCode': 'code1',
              'dataSetName': '单条数据-二级标题(单条)',
              'resultType': 1,
              'displayOrder': 0
            }, {
              'val': '值(二级标题2(单条))',
              'rowspan': 1,
              'colspan': 1,
              'key': 'key2',
              'cellType': 'text',
              'label': '二级标题2(单条)',
              'otherVal': '',
              'otherSelect': false,
              'isRemove': false,
              'isEditCell': false,
              'size': '中',
              'isColorChange': false,
              'color': 'rgba(20, 0, 0, 1)',
              'isWeight': false,
              'isItalic': false,
              'underline': false,
              'align': '中',
              'valign': '中',
              'cellFill': 'rgba(254, 254, 254, 1)',
              'topBorderColor': '',
              'bottomBorderColor': '',
              'leftBorderColor': '',
              'rightBorderColor': '',
              'isShow': true,
              'selectFlag': 'td-0-1-1-1',
              'tag': 'td',
              'deleteBit': false,
              'exitsMapping': true,
              'usedFlag': true,
              'dataSetCode': 'code2',
              'dataSetName': '单条数据-二级标题2(单条)',
              'resultType': 1,
              'displayOrder': 0
            }, {
              'val': '手写内容',
              'rowspan': 1,
              'colspan': 1,
              'cellType': 'text',
              'otherVal': '',
              'otherSelect': '',
              'isRemove': false,
              'isEditCell': false,
              'size': '中',
              'isColorChange': false,
              'color': 'rgba(20, 0, 0, 1)',
              'isWeight': false,
              'isItalic': false,
              'underline': false,
              'align': '中',
              'valign': '中',
              'cellFill': 'rgba(255, 255, 255, 0)',
              'topBorderColor': '',
              'bottomBorderColor': '',
              'leftBorderColor': '',
              'rightBorderColor': '',
              'isShow': true,
              'selectFlag': 'td-0-2-1-1',
              'displayOrder': 0
            }]
          ]
        },
        'options': {
          'color': 'rgba(22, 91, 147, 1)',
          'headRowNum': 0,
          'bodyRowNum': 1,
          'colNum': 3,
          'rowMax': 50,
          'colMax': 50,
          'headerFill': '#F9FAFB',
          'cellFill': 'rgba(255, 255, 255, 0)',
          'rowBorderColor': 'rgba(37,58,101,1)',
          'colBorderColor': 'rgba(37,58,101,1)',
          'heightAdaptive': false,
          'isSelect': true,
          'isPage': false,
          'isFirstCreat': false,
          'isRowTotal': false,
          'isColTotal': false,
          'borderSize': '1',
          'configMode': 'custom',
          'changeKey': ['color']
        }
      },
      singleDataMap: {
        'code1': [{
          'code1&key1': '第一项内容'
        }],
        'code2': [{
          'code2&key2': '第二项内容'
        }]
      },
      multipleDataArray: [
        {
          'code3&key3': '业务查房',
          'code3&key4': '1',
          'code3&key5': '1'
        }, {
          'code3&key3': '行政查房',
          'code3&key4': '2',
          'code3&key5': '2'
        }, {
          'code3&key3': '教学查房',
          'code3&key4': '3',
          'code3&key5': '3'
        }
      ]
    }
  },
  mounted() {
    // 初始化表格
    this.$refs.generalTableRender.initTable(JSON.stringify(this.tableJsonObj), () => {
      this.$nextTick(() => {
        this.$refs.generalTableRender.refreshData(this.multipleDataArray, this.singleDataMap, true)
      })
    })
  },
  methods: {
    initTable(tableJsonStr) {
      this.$nextTick(() => {
        // 初始化表格
        this.$refs.generalTableRender.initTable(tableJsonStr)
      })
    },
    refreshData(multipleDataArray = [], singleDataMap = {}) {
      this.$nextTick(() => {
        this.$refs.generalTableRender.refreshData(multipleDataArray, singleDataMap, true)
      })
    },
    dataComplete() {
      setTimeout(() => {
        this.tableLoading = false
      }, 500)
    }
  }
}
</script>

<style scoped>

</style>
